<template>
	<view class="container">
		<view class="swiper-box">
			<swiper class="swiper-content" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item ,index) in info" :key="index" :data-row="item" @click.stop="onLookProduct">
					<image :src="$imageUrl(item.mainImage)" mode="aspectFill" class="imageCss"></image>
					<view class="loopBkgView">
						<view>{{item.productName}}</view>
						<view>点击了解更多产品详情</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		
		<view class="scroll_content">
			<scroll-view scroll-y="true" :show-scrollbar="false" enhanced="true" style="height: 100%;">
				<view v-for="(item, index) in projectList" :key="index" :data-row="item" style="margin-bottom: 40rpx;" @click="onTap">
					<cs-project-info :project-info="item"></cs-project-info>
				</view>
			</scroll-view>
		</view>
		
	</view>

</template>

<script>
export default {
	data(){
		return {
			projectList:[],
			info: [],
			indicatorDots: false,
			autoplay: true,
			interval: 3000,
			duration: 500
		}
	},
	onShow() {
		this.$weixinAuth.isNeedRegister().then(ok=>{
			if(ok.needRegister) {
				this.$Router.push('/pages/register/register')
			} else {
				this.loadData()
			}
		})
	},
	methods: {
		loadData(){
			this.loadUnreadCount()
			
			const request1 = this.$NetApi.getMethod('/loyu-api/app/product/hero/images');
			const request2 = this.$NetApi.getMethod('/loyu-api/app/item/user/item');
			
			let self = this;
			self.$progressHud.showLoading();
			Promise.all([request1, request2])
			  .then(responses => {
				  self.$progressHud.hideLoading();
				  self.info = responses[0].data;
				  self.projectList = responses[1].rows;
			  })
			  .catch(error => {
				  self.$progressHud.hideLoading();
				  self.$progressHud.showToast(error.errMsg || '网络错误');
			  });
		},
		onTap(e){
			const itemId = e.currentTarget.dataset.row.itemId;
			
			if(this.$weixinAuth.canControl(itemId) || this.$weixinAuth.canSee(itemId)) {
				this.$Router.push({
					path:'/modules/projects/pages/projectDetail/projectDetail',
					query:{
						itemId:itemId
					}
				})
			}
		},
		onLookProduct(e){
			let itemId = e.currentTarget.dataset.row.id || ''
			this.$Router.push({
				path:'/modules/products/pages/productDetail/productDetail',
				query:{
					itemId:itemId
				}
			})
		},
		loadUnreadCount(){
			let self = this;
			 self.$NetApi.getMethod('/loyu-api/app/message/info/unread/num').then(ok => {
							if(ok.data > 0) {
								uni.setTabBarBadge({
								  index: 3,
								  text: ok.data + ''
								})
							} else {
								uni.removeTabBarBadge({
									index:3
								})
							}
			 }, fail => {
			 })
		}
	}
}
</script>

<style>

.container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	
	display: flex;
	flex-direction: column;
}

.swiper-box {
  width: calc(100% - 64rpx);
  position: relative;
  padding-top: 56%; /* 计算方式：211/375 * 100% ≈56.2667% */
  
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-top: 24rpx;
  margin-bottom: 90rpx;
  border-radius: 24rpx;
  overflow: clip;
  flex-shrink: 0;
}

.swiper-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.imageCss{
	width: 100%;
	height: 100%;
}

.scroll_content{
	flex: 1;
	width: 100%;
	overflow: hidden;
	padding-bottom: 32rpx;
}

.loopBkgView{
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: 16rpx 32rpx;
	height: 128rpx;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.loopBkgView :first-child{
	font-family: Roboto;
	font-size: 36rpx;
	font-weight: 500;
	line-height: 56rpx;
	letter-spacing: normal;
	color: #FFFFFF;
}
.loopBkgView :last-child{
	font-family: Roboto;
	font-size: 28rpx;
	font-weight: normal;
	line-height: 40rpx;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.8)
}

</style>